<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import type { FormType } from './index'
import { GetDataDetail, PostCreateData, PutModifyData } from '@/api/modules/icon'
import detailStore from '@/store/modules/NewCacheData'

const router = useRouter()
const route = useRoute()
const detailData = detailStore()

const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<FormType>({
  display: 0,
  iconClass: '',
  iconPic: '',
  turnLink: '',
  positionTop: 0,
  iconType: 1,
  positionRight: 0,
  layerPic: '',
})

const id = route.query.id as string

const iconClassType = ref([
  { value: 1, label: '首页' },
  { value: 2, label: '普通商品' },
  { value: 3, label: '可用券集合页' },
  { value: 4, label: '秒杀商品' },
  { value: 5, label: '积分商品' },
])

// 图片上传赋值
function handleUploadSuccess(url: string, key: string) {
  if (url) {
    // eslint-disable-next-line ts/ban-ts-comment
    // @ts-expect-error
    ruleForm.value[key] = url
  }
}

// 提交
async function SubmitData() {
  const params = { ...ruleForm.value }
  if (params.iconType === 2) {
    params.iconClass = 0
  }
  if (id) {
    // 编辑
    PutModifyData(params).then((res: any) => {
      if (res.statusCode === 200) {
        ElMessage.success('编辑成功')
        router.push({ name: 'iconIndex' })
      }
    })
  }
  else {
    // 添加
    PostCreateData(params).then((res: any) => {
      if (res.statusCode === 200) {
        ElMessage.success('添加成功')
        detailData.emptyFormData('iconFrom')
        router.push({ name: 'iconIndex' })
      }
    })
  }
}

onMounted(async () => {
  if (id) {
    await GetDataDetail(id).then((res: any) => {
      if (res.statusCode === 200) {
        ruleForm.value = res.data
      }
    })
  }
  else {
    ruleForm.value = detailData.getFormData('iconFrom')
  }

  watch(ruleForm, (newValue) => {
    if (!id) {
      detailData.rememberFormData('iconFrom', newValue)
    }
    if (newValue.iconType === 1) {
      ruleForm.value.positionTop = 0
      ruleForm.value.positionRight = 0
      ruleForm.value.layerPic = ''
    }
  }, { deep: true })
})
</script>

<template>
  <div>
    <PageHeader :title="id ? '编辑' : '添加'" />
    <ElForm ref="ruleFormRef" label-position="top" label-width="80px" :model="ruleForm">
      <PageMain title="基础信息">
        <ElRow :gutter="20">
          <ElCol :md="8">
            <ElFormItem :label="`${ruleForm.iconType === 1 ? '跳转' : '显示'}地址`">
              <el-input v-model="ruleForm.turnLink" placeholder="请输入跳转地址" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="图标类型">
              <el-select v-model="ruleForm.iconType" placeholder="请选择图标类型" clearable>
                <el-option label="活动图标" :value="1" />
                <el-option label="客服图标" :value="2" />
              </el-select>
            </elformitem>
          </ElCol>
          <ElCol v-if="ruleForm.iconType === 1" :md="8">
            <ElFormItem label="显示位置">
              <el-select v-model="ruleForm.iconClass" placeholder="请选择显示位置" clearable>
                <el-option v-for="item in iconClassType" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </elformitem>
          </ElCol>
          <ElCol :md="ruleForm.iconType === 2 ? 8 : 24">
            <ElFormItem label="是否展示">
              <el-switch
                v-model="ruleForm.display"
                :active-value="1"
                :inactive-value="0"
              />
            </elformitem>
          </ElCol>
          <ElCol v-if="ruleForm.iconType === 2" :md="8">
            <ElFormItem label="距离顶部位置">
              <el-input v-model="ruleForm.positionTop" placeholder="请输入距离顶部位置" type="number" />
            </ElFormItem>
          </ElCol>
          <ElCol v-if="ruleForm.iconType === 2" :md="16">
            <ElFormItem label="距离右侧位置">
              <el-input v-model="ruleForm.positionRight" placeholder="请输入距离右侧位置" type="number" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="图标">
              <ImageUpload
                width="auto" height="200" :size="5" :url="ruleForm.iconPic" :ext="['jpg', 'png']"
                @on-success="(imgUrl: string) => handleUploadSuccess(imgUrl, 'iconPic')"
              />
            </ElFormItem>
          </ElCol>
          <ElCol v-if="ruleForm.iconType === 2" :md="8">
            <ElFormItem label="弹窗图">
              <ImageUpload
                width="auto" height="200" :size="5" :url="ruleForm.layerPic" :ext="['jpg', 'png']"
                @on-success="(imgUrl: string) => handleUploadSuccess(imgUrl, 'layerPic')"
              />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </PageMain>
    </ElForm>
    <div style="height: 80px;" />
    <FixedActionBar>
      <ElButton type="primary" size="large" @click="SubmitData()">
        提交
      </ElButton>
    </FixedActionBar>
  </div>
</template>

<style lang="scss" scoped>
.box {
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
}

.card-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
</style>
